// import Vue from 'vue'

// 问题:
// 1. 所有的指令都是全局自定义指令, 不灵活 => 想全局就全局 想局部就局部
// 2. 相当于所有的指令都被注册了,不一定都要用 , 浪费 => 按需使用, 我想用哪个指令 , 就自己导入使用

// 封装一个全局自定义指令: v-imgerror
// <img src="xxx" v-imgerror />
// 指令的核心逻辑就是指令的配置对象
export const imgerror = {
  // 指令的钩子函数
  inserted(el, binding) {
    // el 指令所在的dom
    // binding 指令信息对象 binding.value  指令的值
    // console.log(el, binding.value)
    // el.src = binding.value 不是无脑替换src
    el.onerror = function() {
      el.src = binding.value
    }
  }
}

// 需求: 全局自定义指令, v-color
// <span v-color="color">测试文字</span>  color: 'blue'
export const color = {
  inserted(el, binding) {
    el.style.color = binding.value
  }
}

// export const num = 10
